extends ./common/layout
block content
  section#content
    section.vbox
      section.scrollable.padder
        .m-b-md
          h3.m-b-none Datatable
        section.panel.panel-default
          header.panel-heading
            | Responsive Table
          .row.wrapper
            .col-sm-5.m-b-xs
              //-select.input-sm.form-control.input-s-sm.inline.v-middle
                option(value='0') Bulk action
              button.btn.btn-sm.btn-info(data-toggle="modal",data-target="#myModal") 新增
            .col-sm-4.m-b-xs
              //-.btn-group(data-toggle='buttons')
                label.btn.btn-sm.btn-default.active
                  input(type='radio', name='options')
                  |  Day
                label.btn.btn-sm.btn-default
                  input(type='radio', name='options')
                  |  Week
                label.btn.btn-sm.btn-default
                  input(type='radio', name='options')
                  |  Month
            .col-sm-3
              .input-group
                input.input-sm.form-control(type='text', placeholder='输入歌曲名称')
                span.input-group-btn
                  button.btn.btn-sm.btn-default(type='button') Go!
          .table-responsive
            table.table.table-striped.b-t.b-light
              thead
                tr
                  th #
                  th 名称
                  th 作者
                  th 路径
                  th 海报
                  th 播放次数
                  th 创建时间
                  th 操作
              tbody
                each mp3,index in mp3s
                  tr
                    td #{index+1}
                    td #{mp3.title}
                    td #{mp3.artist}
                    td #{mp3.mp3}
                    td
                      a(href="#{mp3.poster}",target="_black") 显示
                    td #{mp3.plays}
                    td #{moment(mp3.meta.createAt).format('YYYY-MM-DD')}
                    td
                      a.active(href='#', data-toggle='class')
                        i.fa.fa-check.text-success.text-active 已发布
                        i.fa.fa-times.text-danger.text 未发布
          footer.panel-footer
            .row
              .col-sm-4.hidden-xs
                select.input-sm.form-control.input-s-sm.inline.v-middle
                  option(value='10') 10条
                  option(value='20') 20条
                  option(value='50') 50条
                button.btn.btn-success.btn-sm(data-toggle='class:show inline', data-target='#spin', data-loading-text='查询中...') 查询
              .col-sm-4.text-center
                small.text-muted.inline.m-t-sm.m-b-sm showing 20-30 of 50 items
              .col-sm-4.text-right.text-center-xs
                ul.pagination.pagination-sm.m-t-none.m-b-none
                  li
                    a(href='#')
                      i.fa.fa-chevron-left
                  li
                    a(href='#') 1
                  li
                    a(href='#') 2
                  li
                    a(href='#') 3
                  li
                    a(href='#') 4
                  li
                    a(href='#') 5
                  li
                    a(href='#')
                      i.fa.fa-chevron-right
    a.hide.nav-off-screen-block(href='#', data-toggle='class:nav-off-screen,open', data-target='#nav,html')
    // Modal
    #myModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel')
      .modal-dialog(role='document')
        .modal-content
          .modal-header
            button.close(type='button', data-dismiss='modal', aria-label='Close')
              span(aria-hidden='true') ×
            h4#myModalLabel.modal-title 新增音乐
          form(action="/admin/mp3",method='post').form-horizontal
            .modal-body
              .form-group
                label.col-lg-2.control-label 名称
                .col-lg-10
                  input.form-control(type='text',name='mp3[title]',placeholder='歌曲名称')
              .form-group
                label.col-lg-2.control-label 作者
                .col-lg-10
                  input.form-control(type='text',name='mp3[artist]',placeholder='作者')
              .form-group
                label.col-lg-2.control-label 路径
                .col-lg-10
                  input.form-control(type='text',name='mp3[mp3]',placeholder='路径')
              .form-group
                label.col-lg-2.control-label 海报地址
                .col-lg-10
                  input.form-control(type='text',name='mp3[poster]',placeholder='海报地址')
            .modal-footer
              button.btn.btn-default.btn-sm(type='button', data-dismiss='modal') 取消
              button.btn.btn-primary.btn-sm(type='submit') 提交
